---
title: Android Navigation Bar
description: A function to set the android navigation bar's content color based on the theme.
---

{/* prettier-ignore-start */}
{/* prettier-ignore-end */}

import Code from '@/components/Code.astro';
import { LinkButton } from '@/components/react/LinkButton';
import { Aside, Card } from '@astrojs/starlight/components';

<LinkButton target="_blank" href="https://docs.expo.dev/versions/latest/sdk/navigation-bar/">
  expo-navigation-bar
</LinkButton>

<br />

A function to set the android navigation bar's content color based on the theme.

### Installation

**Install <a target="_blank" href="https://docs.expo.dev/versions/latest/sdk/navigation-bar/">expo-navigation-bar</a> dependencies**

```bash
npx expo install expo-navigation-bar
```

**Copy/paste the following code to `~/lib/android-navigation-bar.tsx`**:


<Code code={
    `
import * as NavigationBar from 'expo-navigation-bar';
import { Platform } from 'react-native';
import { NAV_THEME } from '~/lib/constants';

export async function setAndroidNavigationBar(theme: 'light' | 'dark') {
  if (Platform.OS !== 'android') return;
  await NavigationBar.setButtonStyleAsync(theme === 'dark' ? 'light' : 'dark');
  await NavigationBar.setBackgroundColorAsync(
    theme === 'dark' ? NAV_THEME.dark.background : NAV_THEME.light.background
  );
}
    `
} lang="tsx" title="~/lib/android-navigation-bar.tsx" />

**Whenever you set the color scheme, call the function to update the navigation bar**


<Card title="Example"> 

The `showcase` app uses it in 2 places:

1. In the root `_layout.tsx` to set the navigation bar color upon app load: 
[see the code](https://github.com/mrzachnugent/react-native-reusables/blob/main/apps/showcase/app/_layout.tsx)

2. In the `ThemeToggle` component to set the navigation bar color when the theme is changed: [see the code](https://github.com/mrzachnugent/react-native-reusables/blob/main/apps/showcase/components/ThemeToggle.tsx)

</Card>

